<!DOCTYPE html>
  
  
  
  
   <html class="no-js"> 

  <head lang="en-us">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <title>How to Contribute - Mail For Good</title>
    <meta name="generator" content="Hugo 0.30.2" />

    
    <meta name="description" content="An open source app for sending millions of emails as cheaply as possible.">
    
    <link rel="canonical" href="/how-to-contribute/">
    
    <meta name="author" content="Free Code Camp">
    

    <meta property="og:url" content="/how-to-contribute/">
    <meta property="og:title" content="Mail For Good">
    <meta property="og:image" content="/logo.png">
    <meta name="apple-mobile-web-app-title" content="Mail For Good">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="shortcut icon" type="image/x-icon" href="/logo.png">
    <link rel="icon" type="image/x-icon" href="/logo.png">

    <style>
      @font-face {
        font-family: 'Icon';
        src: url('/fonts/icon.eot');
        src: url('/fonts/icon.eot')
               format('embedded-opentype'),
             url('/fonts/icon.woff')
               format('woff'),
             url('/fonts/icon.ttf')
               format('truetype'),
             url('/fonts/icon.svg')
               format('svg');
        font-weight: normal;
        font-style: normal;
      }
    </style>
    <link rel="stylesheet" href="/stylesheets/application.css">
    <link rel="stylesheet" href="/stylesheets/temporary.css">
    <link rel="stylesheet" href="/stylesheets/palettes.css">
    <link rel="stylesheet" href="/stylesheets/highlight/highlight.css">

    
    
    
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=%27Lato%27%2c%20sans-serif:400,700|Ubuntu&#43;Mono">
    <style>
      body, input {
        font-family: '\27Lato\27, sans-serif', Helvetica, Arial, sans-serif;
      }
      pre, code {
        font-family: 'Ubuntu Mono', 'Courier New', 'Courier', monospace;
      }
    </style>

    
    <link rel="stylesheet" href="/stylesheets/modal.css">
    
    <link rel="stylesheet" href="/stylesheets/misc.css">
    
    <link rel="stylesheet" href="/stylesheets/palettes.css">
    
    <script src="/javascripts/modernizr.js"></script>

    

  </head>
  <body class="palette-primary-green palette-accent-yellow">



	
	


<div class="backdrop">
	<div class="backdrop-paper"></div>
</div>

<input class="toggle" type="checkbox" id="toggle-drawer">
<input class="toggle" type="checkbox" id="toggle-search">
<label class="toggle-button overlay" for="toggle-drawer"></label>

<header class="header">
	<nav aria-label="Header">
  <div class="bar default">
    <div class="button button-menu" role="button" aria-label="Menu">
      <label class="toggle-button icon icon-menu" for="toggle-drawer">
        <span></span>
      </label>
    </div>
    <div class="stretch">
      <div class="title" style="display: flex; align-items: flex-start;">
        <p style="font-weight: bold;"><a href="/">Mail For Good</a></p> <img src="/logo.png" style="max-height: 5rem; margin-top: -1.25rem;" />
      </div>
    </div>

    
    <div class="button button-twitter" role="button" aria-label="Twitter">
       <a href="https://twitter.com/freeCodeCamp" title="@freeCodeCamp on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
    </div>
    

    
    <div class="button button-github" role="button" aria-label="GitHub">
      <a href="https://github.com/freeCodeCamp/mail-for-good" title="@freeCodeCamp/mail-for-good on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
    </div>
    
    
        
  </div>
  <div class="bar search">
    <div class="button button-close" role="button" aria-label="Close">
      <label class="toggle-button icon icon-back" for="toggle-search"></label>
    </div>
    <div class="stretch">
      <div class="field">
        <input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
      </div>
    </div>
    <div class="button button-reset" role="button" aria-label="Search">
      <button class="toggle-button icon icon-close" id="reset-search"></button>
    </div>
  </div>
</nav>
</header>

<main class="main">
	<div class="drawer">
		<nav aria-label="Navigation">
  <a href="https://github.com/freeCodeCamp/mail-for-good" class="project">
    <div class="banner">
      
        <div class="logo">
          <img src="/logo.png">
        </div>
      
      <div class="name">
        <strong>Mail For Good <span class="version">1.0.0</span></strong>
        
          <br>
          freeCodeCamp/mail-for-good
        
      </div>
    </div>
  </a>

  <div class="scrollable">
    <div class="wrapper">
      
        <ul class="repo">
          <li class="repo-download">
            <a href="https://github.com/freeCodeCamp/mail-for-good/archive/master.zip" target="_blank" title="Download" data-action="download">
              <i class="icon icon-download"></i> Download
            </a>
          </li>
          <li class="repo-stars">
            <a href="https://github.com/freeCodeCamp/mail-for-good/stargazers" target="_blank" title="Stargazers" data-action="star">
              <i class="icon icon-star"></i> Stars
              <span class="count">&ndash;</span>
            </a>
          </li>
        </ul>
        <hr>
      

      <div class="toc">
        
        <ul>
          




<li>
  
    



<a  title="About" href="/">
	
	About
</a>



  
</li>



<li>
  
    



<a  title="Getting started" href="/getting-started/">
	
	Getting started
</a>



  
</li>



<li>
  
    



<a class="current" title="How to Contribute" href="/how-to-contribute/">
	
	How to Contribute
</a>


<ul id="scrollspy">
</ul>


  
</li>



<li>
  
    



<a  title="License" href="/license/">
	
	License
</a>



  
</li>


        </ul>
        

        
        <hr>
        <span class="section">The author</span>
        
        <ul>
          
          <li>
            <a href="https://twitter.com/freeCodeCamp" target="_blank" title="@freeCodeCamp on Twitter">
              @freeCodeCamp on Twitter
            </a>
          </li>
          

          
          <li>
            <a href="https://github.com/freeCodeCamp/mail-for-good" target="_blank" title="@freeCodeCamp/mail-for-good on GitHub">
              @freeCodeCamp/mail-for-good on GitHub
            </a>
          </li>
          

          
        </ul>
        
      </div>
    </div>
  </div>
</nav>

	</div>

	<article class="article">
		<div class="wrapper">
			<h1>How to Contribute </h1>

			

<p>Found a bug? Please let us know by <a href="https://github.com/freeCodeCamp/Mail-for-Good/issues/new">creating an issue</a>.</p>

<h2 id="how-to-run-mail-for-good-in-development-mode">How to run Mail For Good in development mode</h2>

<p><em>This guide was written for linux-based machines (using Debian). It will also work with OSX, but you&rsquo;ll need to install things differently (e.g. with Brew). Deployment on Windows is untested, and the current suggestion is to run Ubuntu in a virtual machine using software such as VirtualBox.</em></p>

<p>In development mode, Mail 4 Good has a number of useful utilities:</p>

<ul>
<li>Hot reloading with webpack hot middleware</li>
<li>The ability to use Redux Dev Tools (a browser extension that allows for redux time travel &amp; viewing state)</li>
<li>Additional debugging information on the server</li>
</ul>

<h2 id="prerequisites">Prerequisites</h2>

<p>Your machine should have NPM and Node &gt;=7.6x installed. It will also need Redis and Postgres. A full guide for installing each of these is given below. Before you install any packages, ensure your package list is up to date with:</p>

<pre><code>sudo apt-get update
</code></pre>

<h3 id="npm">NPM</h3>

<pre><code>sudo apt-get install -y npm
</code></pre>

<h3 id="node">Node</h3>

<pre><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
</code></pre>

<h3 id="redis">Redis</h3>

<pre><code>sudo apt-get install -y redis-server
</code></pre>

<h3 id="postgres">Postgres</h3>

<pre><code>sudo apt-get install -y postgresql postgresql-contrib
</code></pre>

<h2 id="setup">Setup</h2>

<p>*Before you start, run <code>node -v</code> and ensure you are using &gt;=7.6x. Check out <a href="https://github.com/creationix/nvm">node version manager</a> for an easy way to handle this.</p>

<ul>
<li>Clone the repository. If you have forked the repo, make sure you clone the fork rather than the link below.</li>
</ul>

<pre><code>git clone https://github.com/freeCodeCamp/Mail-for-Good.git
</code></pre>

<ul>
<li>Change into the cloned directory. Install packages.</li>
</ul>

<pre><code>cd Mail-for-Good &amp;&amp; npm install
</code></pre>

<ul>
<li>Set up your Google API key with <a href="/google-api-guide">this guide</a>. There are only a few environment variables that need to be changed, these are listed below.</li>
</ul>

<pre><code>mv .env.example .env
# You need to edit the .env file. You can use nano, vim, atom, gedit - take your pick.
nano .env
</code></pre>

<pre><code># EXAMPLE .env FILE
GOOGLE_CONSUMER_KEY= Put your consumer key from Google here
GOOGLE_CONSUMER_SECRET= Put your consumer secret key from Google here
GOOGLE_CALLBACK= Put your Google Authorised redirect URI here (we use http://localhost:8080/auth/google/callback)
ENCRYPTION_PASSWORD= Put a long random password here, you don't need to remember it yourself

# The below lines are for configuring Postgres.
# If you know what you're doing, feel free to ignore the suggestions.
PSQL_USERNAME= Put your username here (which can be found with the command 'whoami')
PSQL_PASSWORD= Put the password you intend to use for your Postgres user here
PSQL_DATABASE= Put 'mail_for_good' here
</code></pre>

<ul>
<li>Start both redis-server and postgresql as background services.</li>
</ul>

<pre><code>sudo service redis-server start
sudo service postgresql start

# You can stop these services by replacing 'start' with 'stop', restart them with 'restart', and
# check their status with 'status'.
</code></pre>

<ul>
<li>We now need to configure the Postgres DB. We&rsquo;ll keep this part as simple as possible, but feel free to setup your own config if you wish.</li>
</ul>

<pre><code># Running the command below will let you know your username.
whoami
# When you run the command below, enter your username and password. Answer 'y' when asked to be a superuser.
# Make sure the username and password match those specified in the .env file.
sudo -u postgres createuser --interactive --pwprompt
# Next, we need to create a database.
# feel free to skip this step and customise things on your own if you wish.
# The .env.example file contains info on environment variables used with PSQL.
createdb mail_for_good
</code></pre>

<p>&ndash; Done! Run the command below then check out <a href="http://localhost:8080">http://localhost:8080</a></p>

<pre><code>npm run dev
</code></pre>

<h2 id="help">Help</h2>

<p>Got an issue? Want to report a bug or a new feature you&rsquo;re thinking of? Please let us know <a href="https://github.com/freeCodeCamp/Mail-for-Good/issues">here</a>!</p>


			<footer class="footer">
				 
<nav class="pagination" aria-label="Footer">
  <div class="previous">
    
    <a href="/license/" title="License">
      <span class="direction">
        Previous
      </span>
      <div class="page">
        <div class="button button-previous" role="button" aria-label="Previous">
          <i class="icon icon-back"></i>
        </div>
        <div class="stretch">
          <div class="title">
            License
          </div>
        </div>
      </div>
    </a>
    
  </div>

  <div class="next">
    
    <a href="/local-deployment-guide/" title="Local Deployment Guide">
      <span class="direction">
        Next
      </span>
      <div class="page">
        <div class="stretch">
          <div class="title">
            Local Deployment Guide
          </div>
        </div>
        <div class="button button-next" role="button" aria-label="Next">
          <i class="icon icon-forward"></i>
        </div>
      </div>
    </a>
    
  </div>
</nav>
  
</div>
<section id="modal-wrap">
  <div id="modal-close-button">
    <p>&times;</p>
  </div>
  <div id="modal">
    <img src="" id='modal-image' alt="">
  </div>
</section>
			</footer>
		</div>
	</article>

	<div class="results" role="status" aria-live="polite">
		<div class="scrollable">
			<div class="wrapper">
				<div class="meta"></div>
				<div class="list"></div>
			</div>
		</div>
	</div>
</main>

    <script>
    
      var base_url = '\/';
      var repo_id  = 'freeCodeCamp\/mail-for-good';
    
    </script>

    <script src="/javascripts/application.js"></script>
    
    <script src="/javascripts/modal.js"></script>
    

    <script>
      /* Add headers to scrollspy */
      var headers   = document.getElementsByTagName("h2");
      var scrollspy = document.getElementById('scrollspy');

      if(scrollspy) {
        if(headers.length > 0) {
          for(var i = 0; i < headers.length; i++) {
            var li = document.createElement("li");
            li.setAttribute("class", "anchor");

            var a  = document.createElement("a");
            a.setAttribute("href", "#" + headers[i].id);
            a.setAttribute("title", headers[i].innerHTML);
            a.innerHTML = headers[i].innerHTML;

            li.appendChild(a)
            scrollspy.appendChild(li);
          }
        } else {
          scrollspy.parentElement.removeChild(scrollspy)
        }


        /* Add permanent link next to the headers */
        var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

        for(var i = 0; i < headers.length; i++) {
            var a = document.createElement("a");
            a.setAttribute("class", "headerlink");
            a.setAttribute("href", "#" + headers[i].id);
            a.setAttribute("title", "Permanent link")
            a.innerHTML = "#";
            headers[i].appendChild(a);
        }
      }
    </script>

    
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
  </body>
</html>

